<template>
  <div>
    <van-dialog v-model="isShowAddress" show-cancel-button @confirm="confirmAddress">
      <div class="header">
        <span>请选择地址</span>
        <span class="font-colorA1" @click="$router.push({name:'user-address'})">管理</span>
      </div>
      <van-radio-group v-model="radio">
        <van-cell-group class="cellGroup">
          <van-cell v-for="(item,index) in addressList" :key="index" clickable @click="radio = index">
            <div slot="title" class="content">
              <span class="name">{{ item.name }}</span>
              <br>
              <span class="mobile">{{ item.address_mobile }}</span>
              <br>
              <span class="address">{{ item.pro }}{{ item.city }}{{ item.arae }}{{ item.address_detail }}</span>
            </div>
            <van-radio :name="index" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>
  </div>
</template>
<script>
import { GetUserAddressList } from '@/api/customer'
import axios from 'axios'
export default {
  data() {
    return {
      mapJson: '../../static/json/map.json',
      isShowAddress: false,
      username: '',
      password: '',
      addressList: [],
      radio: 0
    }
  },
  mounted() {
    this.getAddressList()
  },
  methods: {
    // 获取客户地址
    getAddressList() {
      GetUserAddressList().then(res => {
        const data = res.data
        if (data.status_code === 200) {
          data.list.forEach(item => {
            axios.get(this.mapJson).then((res) => {
              if (res.status === 200) {
                const data = res.data
                item.pro = data[item.address_province_id]
                item.city = data[item.address_city_id]
                item.arae = data[item.address_area_id]
              }
            })
          })
          this.addressList = data.list
          this.addressList.forEach((item, index) => {
            if (item.is_default === 1) {
              this.radio = index
            }
          })
          this.addressList.forEach((item, index) => {
            if (item.is_default === 1) {
              this.radio = index
              this.$emit('getAddressFromDialog', item)
            }
          })
        }
      })
    },
    confirmAddress() {
      this.address = this.addressList[this.radio]
      this.$emit('getAddressFromDialog', this.address)
      this.addressList.forEach((item, index) => {
        if (item.is_default === 1) {
          this.radio = index
        }
      })
    }
  }
}
</script>
<style lang="scss">
  @import "src/styles/mixin.scss";
  .header{
    padding: 0 pxCalc(20px);
    line-height: pxCalc(50px);
    width: 100%;
    height: pxCalc(50px);
    display: flex;
    justify-content: space-between;
  }
  .cellGroup{
    max-height: pxCalc(300px);
    overflow-y: scroll;
    .van-cell{
      justify-content: space-between;
      .van-cell__title{
        flex: none;
      }
    }
    .content{
      .name{
        font-weight: bold;
      }
      .mobile{
        font-size: pxCalc(12px);
      }
      .address{
        font-size: pxCalc(12px);
      }
    }
  }
</style>
